@extends('Index/vip/vip_base')
@section('con-right')
	<div class="pull-right">
		<div class="user-content__box clearfix bgf">
			<div class="title">账户信息-个人资料</div>
			<div class="port b-r50" id="crop-avatar">
				<div class="img"><img src="/index/images/icons/default_avt.png" class="cover b-r50"></div>
			</div>
			<form action="/index/vip/userinfo_update" method="post" class="user-setting__form" role="form">
				<div class="user-form-group">
					<label for="user-id">用户名：</label>
					<input type="text" id="user-id" name="username" value="{{$user->username}}" placeholder="请输入您的昵称">
				</div>
				<!-- <div class="user-form-group">
					<label>等级：</label>
					普通会员 <a href="/index/agent_level.html">提升</a>
				</div> -->
				<div class="user-form-group">
					<label>性别：</label>
					<label><input type="radio" name="sex" value="M"><i class="iconfont icon-radio"></i> 男士</label>
					<label><input type="radio" name="sex" value="W"><i class="iconfont icon-radio"></i> 女士</label>
					<label><input type="radio" name="sex" value="S"><i class="iconfont icon-radio"></i> 保密</label>
				</div>
				<div class="user-form-group">
					<label>生日：</label>
					<label><input type="text" class="datepicker" name="birthday" value="{{$user->birthday}}" placeholder="请选择您的出生日期"></label>
				</div>
				<div class="form-group" style="width:800px">
					<label class="">住址：</label>
					<div class="addr-linkage" style="display:inline;">
						<select name="province"></select>
						<select name="city"></select>
						<select name="area"></select>
						<select name="town"></select>
					</div>
				</div>
				<div class="user-form-group">
					<button type="submit" class="btn">确认修改</button>
				</div>
			</form>
			<script src="/index/js/jquery.citys.js"></script>			
			<script src="/index/js/zebra.datepicker.min.js"></script>
			<link rel="stylesheet" href="/index/css/zebra.datepicker.css">
			<script>
				$('input.datepicker').Zebra_DatePicker({
					default_position: 'below',
					show_clear_date: false,
					show_select_today: false,
				});
			</script>
			<script>
				$('input[name="sex"]').each(function(){
					if($(this).val()=="{{$user->sex}}"){
						$(this).prop('checked',true);
					}
				})
				@if(isset($_GET['data']))
					layer.msg('修改成功',{icon:1});
				@endif
				$(document).ready(function(){
					// 添加街道/乡镇
					function townFormat(info){
						$('.addr-linkage select[name="town"]').hide().empty();
						if (info['code'] % 1e4 && info['code'] < 7e6){	//是否为“区”且不是港澳台地区
							var ajaxConfig = {
								url: 'http://passer-by.com/data_location/town/' + info['code'] + '.json',
								scriptCharset:'UTF-8',
								dataType: "json",
								timeout: 4000,
								success: function(data) {
									$('.addr-linkage select[name="town"]').show();
									// $('#code').val(info['code']) // 填地区编码
									for (i in data) {
										$('.addr-linkage select[name="town"]').append(
											'<option value="' + data[i] + '">' + data[i] + '</option>'
										);
									};
									$('.addr-linkage select[name="town"]').find('option[value="{{$address[3]}}"]').prop("selected", "selected");
								},
							};
							$.ajax(ajaxConfig).fail(function(p1,p2,p3){
								ajaxConfig.url = 'js/data_location/town/' + info['code'] + '.json';
								$.ajax(ajaxConfig)
							});
						}
					};
					$('.addr-linkage').citys({
						// 如果某天这个仓库地址失效了dataUrl请使用本地 2017.10 的数据 'js/data_location/list.json'
						dataUrl: 'http://passer-by.com/data_location/list.json',
						spareUrl: 'js/data_location/list.json',
						dataType: 'json',
						valueType: 'name',
						province: '{{$address[0]}}',
						city:'{{$address[1]}}',
						area: '{{$address[2]}}',
						onChange: function(data) {
							townFormat(data)
						},
					},function(api){
						var info = api.getInfo();
						townFormat(info);
					});
				}); 
			</script>
		</div>
	</div>
		<!-- 头像选择模态框 -->
	<link href="/index/css/cropper/cropper.min.css" rel="stylesheet">
	<link href="/index/css/cropper/sitelogo.css" rel="stylesheet">
	<script src="/index/js/cropper/cropper.min.js"></script>
	<script src="/index/js/cropper/sitelogo.js"></script>
	<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<form class="avatar-form" action="/index/vip/user_icon_update" enctype="multipart/form-data" method="post" onsubmit="fun()">
					<div class="modal-header">
						<button class="close" data-dismiss="modal" type="button">&times;</button>
						<h4 class="modal-title" id="avatar-modal-label">Change Logo Picture</h4>
					</div>
					<div class="modal-body">
						<div class="avatar-body">
							<div class="avatar-upload">
								<input class="avatar-src" name="avatar_src" type="hidden">
								<input class="avatar-data" name="avatar_data" type="hidden">
								<label for="avatarInput">图片上传</label>
								<input class="avatar-input" id="avatarInput" name="icon" type="file"></div>
							<div class="row">
								<div class="col-md-9">
									<div class="avatar-wrapper"></div>
								</div>
								<div class="col-md-3">
									<div class="avatar-preview preview-lg"></div>
									<div class="avatar-preview preview-md"></div>
									<div class="avatar-preview preview-sm"></div>
								</div>
							</div>
							<div class="row avatar-btns">
								<div class="col-md-9">
									<div class="btn-group">
										<button class="btn" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"><i class="fa fa-undo"></i> 向左旋转</button>
									</div>
									<div class="btn-group">
										<button class="btn" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"><i class="fa fa-repeat"></i> 向右旋转</button>
									</div>
								</div>
								<div class="col-md-3">
									<button class="btn btn-success btn-block" type="submit"><i class="fa fa-save"></i> 保存修改</button>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div> -->
	<script>
		// $('btn[type="submit"]').click(function(){
		// 	alert(1);
		// 	var index = parent.layer.getFrameIndex(window.name);
		// 	parent.layer.close(index);
		// })
		function fun(){
			$("#avatar-modal").css("display","none");
			$(".modal-backdrop").remove();
		}
	</script>
@endsection